<template>
  <AxiomBottomSheet
    :visible="visible"
    @update:visible="$emit('update:visible', $event)"
  >
    <div class="axiom-number-range-sheet">
      <!-- Header -->
      <div class="header">
        <AxiomButton
          size="small"
          type="primary"
          @click="handleClear"
          class="btn-clear"
        >
          清空
        </AxiomButton>
        
        <AxiomTitle
          :title="title"
          type="component"
          level="3"
          class="sheet-title"
        />
        
        <AxiomButton
          size="small"
          @click="$emit('update:visible', false)"
          class="btn-close"
        >
          <AxiomIcon name="Close" size="16" />
        </AxiomButton>
      </div>
      
      <!-- Number Range Content -->
      <div class="number-range-content">
        <!-- Manual Input -->
        <div class="manual-input">
          <div class="input-group">
            <label>最小值</label>
            <input 
              type="number" 
              v-model.number="minValue" 
              :min="min" 
              :max="max"
              @input="updateSlider"
            />
          </div>
          <div class="input-group">
            <label>最大值</label>
            <input 
              type="number" 
              v-model.number="maxValue" 
              :min="min" 
              :max="max"
              @input="updateSlider"
            />
          </div>
        </div>
        
        <!-- Range Slider -->
        <div class="range-slider" ref="sliderRef">
          <div class="slider-track">
            <div 
              class="slider-range" 
              :style="{ 
                left: `${minPercentage}%`, 
                width: `${rangePercentage}%` 
              }"
            ></div>
            <div 
              class="slider-thumb slider-thumb-min" 
              :style="{ left: `${minPercentage}%` }"
              @mousedown="startDrag('min', $event)"
              @touchstart.prevent="startDrag('min', $event)"
            ></div>
            <div 
              class="slider-thumb slider-thumb-max" 
              :style="{ left: `${maxPercentage}%` }"
              @mousedown="startDrag('max', $event)"
              @touchstart.prevent="startDrag('max', $event)"
            ></div>
          </div>
          <div class="slider-labels">
            <span>{{ min }}</span>
            <span>{{ max }}</span>
          </div>
        </div>
        
        <!-- Current Range Display -->
        <div class="range-display">
          <span>{{ minValue }} - {{ maxValue }}</span>
        </div>
      </div>
      
      <!-- Footer Button -->
      <div class="footer">
        <AxiomButton
          type="primary"
          size="large"
          @click="handleConfirm"
          class="confirm-button"
        >
          确定
        </AxiomButton>
      </div>
    </div>
  </AxiomBottomSheet>
</template>

<script setup>
import { ref, watch, onUnmounted, computed } from 'vue';
import AxiomBottomSheet from './AxiomBottomSheet.vue';
import AxiomButton from '../common/AxiomButton.vue';
import AxiomTitle from '../common/AxiomTitle.vue';
import AxiomIcon from '../common/AxiomIcon.vue';

const props = defineProps({
  visible: Boolean,
  title: {
    type: String,
    default: '选择数值范围'
  },
  modelValue: Array,
  min: {
    type: Number,
    default: 0
  },
  max: {
    type: Number,
    default: 9999
  }
});

const emit = defineEmits(['update:visible', 'update:modelValue', 'confirm']);

const minValue = ref(props.min);
const maxValue = ref(props.max);
const sliderRef = ref(null);

const minPercentage = computed(() => ((minValue.value - props.min) / (props.max - props.min)) * 100);
const maxPercentage = computed(() => ((maxValue.value - props.min) / (props.max - props.min)) * 100);
const rangePercentage = computed(() => ((maxValue.value - minValue.value) / (props.max - props.min)) * 100);


const initializeValues = () => {
  if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length === 2) {
    minValue.value = props.modelValue[0];
    maxValue.value = props.modelValue[1];
  } else {
    minValue.value = props.min;
    maxValue.value = props.max;
  }
};
watch(() => props.modelValue, initializeValues, { immediate: true });

watch(() => [props.min, props.max], () => {
  if (!props.modelValue || props.modelValue.length !== 2) {
    initializeValues();
  }
});

let isDragging = false;
let dragType = '';

const updateSlider = () => {
  if (minValue.value > maxValue.value) {
    if (dragType === 'min') {
      maxValue.value = minValue.value;
    } else {
      minValue.value = maxValue.value;
    }
  }
  
  minValue.value = Math.max(props.min, Math.min(minValue.value, props.max));
  maxValue.value = Math.max(props.min, Math.min(maxValue.value, props.max));
};

const startDrag = (type, event) => {
  isDragging = true;
  dragType = type;
  document.addEventListener('mousemove', onDrag);
  document.addEventListener('mouseup', stopDrag);
  document.addEventListener('touchmove', onDrag, { passive: false });
  document.addEventListener('touchend', stopDrag);
};

const onDrag = (event) => {
  if (!isDragging || !sliderRef.value) return;
  event.preventDefault();

  const sliderRect = sliderRef.value.getBoundingClientRect();
  const clientX = event.touches ? event.touches[0].clientX : event.clientX;
  const x = clientX - sliderRect.left;
  const percentage = Math.max(0, Math.min(1, x / sliderRect.width));
  const value = Math.round(props.min + percentage * (props.max - props.min));
  
  if (dragType === 'min') {
    minValue.value = Math.min(value, maxValue.value);
  } else {
    maxValue.value = Math.max(value, minValue.value);
  }
};

const stopDrag = () => {
  isDragging = false;
  document.removeEventListener('mousemove', onDrag);
  document.removeEventListener('mouseup', stopDrag);
  document.removeEventListener('touchmove', onDrag);
  document.removeEventListener('touchend', stopDrag);
};

onUnmounted(stopDrag);

const handleConfirm = () => {
  const result = [minValue.value, maxValue.value];
  emit('update:modelValue', result);
  emit('confirm', result);
  emit('update:visible', false);
};

const handleClear = () => {
  minValue.value = props.min;
  maxValue.value = props.max;
};

</script>

<style lang="scss">
@use '../../styles/components/mobile/axiom-number-range-sheet';

.number-range-content {
  padding: 24px;
  
  .manual-input {
    display: flex;
    gap: 16px;
    margin-bottom: 32px;
    
    .input-group {
      flex: 1;
      
      label {
        display: block;
        font-size: 14px;
        color: var(--text-color);
        margin-bottom: 8px;
        font-weight: 500;
      }
      
      input {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-color-tertiary);
        color: var(--text-color);
        font-size: 16px;
        
        &:focus {
          outline: none;
          border-color: var(--primary-color);
          box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
        }
      }
    }
  }
  
  .range-slider {
    margin-bottom: 24px;
    
    .slider-track {
      position: relative;
      height: 6px;
      background: var(--border-color);
      border-radius: 3px;
      margin: 20px 0;
      
      .slider-range {
        position: absolute;
        height: 100%;
        background: var(--primary-color);
        border-radius: 3px;
      }
      
      .slider-thumb {
        position: absolute;
        width: 20px;
        height: 20px;
        background: var(--primary-color);
        border-radius: 50%;
        top: -7px;
        margin-left: -10px;
        cursor: pointer;
        transition: transform 0.2s ease;
        
        &:hover {
          transform: scale(1.2);
        }
        
        &:active {
          transform: scale(1.3);
        }
      }
    }
    
    .slider-labels {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--text-color-light);
    }
  }
  
  .range-display {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    padding: 16px;
    background: var(--bg-color-tertiary);
    border-radius: 8px;
  }
}
</style> 